<template>
  <div>
    <div class="banner">
      <Banner />
    </div>
    <div class="tabs">
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tabs"
          :key="item.code"
          :label="item.label"
          :name="item.code"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div
      class="content"
      :hidden="!detailHidden">
      <div class="div-center">
        <div class="automate-content">
          <div
            :class="automatecontent1(numbers.length)"
            v-for="(option, index) in numbers"
            :key="index"
            @click="showDetails(option.numbersNext.id)"
          >
            <!-- 下面是组件抽出来的部分 -->
            <div class="lunboPictures">
              <div class="item">
                <!-- <a href="javascript:;"> -->
                <div class="item-div">
                  <a href="#">
                    <img class="item-img" :src="option.src" alt="" />
                  </a>
                </div>
                <!-- </a> -->
                <a href="#" class="item-word">{{ option.text }}</a>
              </div>
              <!-- <a href="javascript:;" class="item-word">{{ option.text }}</a> -->

            </div>
          </div>
        </div>
        <div class="automate-fenyeqi">
          <div style="text-align: center;margin: 10px">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="this.pageData.total"
              :page-size="pageData.limit"
              @current-change="handelPage"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情页 -->
    <div :hidden="detailHidden" class="content-details">
      <el-card style="margin: 10px" shadow="always">
        <div>
          <div class="form" style="margin: 20px">
            <h3>{{ this.form.title }}</h3>
            <hr />
            <span style="color: #999999;font-size: 14px"
            ><i class="el-icon-time"></i>
              {{ new Date(this.form.dateTime).toLocaleDateString() }}</span
            >
            <hr />
          </div>
          <div class="details-content">
            <div class="details-content-left">
              <el-image
                :src="form.images!=null && form.images.length>0 ?form.images[imgCurrent]:''"
                fit="fill"></el-image>
              <el-carousel :autoplay="false" @change="imageChange" :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in form.images" :key="item">
                  <el-image
                    :src="item"
                    fit="fill"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="details-content-right">
              <p v-html="form.content">
<!--                {{this.form.content}}-->
              </p>
            </div>
          </div>
          <hr />
          <div class="div-page">
            <span class="page-left">
              <a
                class="a-page"
                @click="
                  showDetails(form.upForm != null ? form.upForm.numbersNext.id : null)
                "
                href="#"
              >
                <i class="el-icon-arrow-left"></i> 上一篇：{{
                  this.form.upForm != null ? this.form.upForm.numbersNext.title : "没有了"
                }}
              </a>
            </span>
            <span class="page-right">
              <a
                class="a-page"
                @click="
                  showDetails(
                    form.bottomForm != null ? form.bottomForm.numbersNext.id : null
                  )
                "
                href="#"
              >
                下一篇：{{
                  this.form.bottomForm != null
                    ? this.form.bottomForm.numbersNext.title
                    : "没有了"
                }}
                <i class="el-icon-arrow-right"></i>
              </a>
            </span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
    import Banner from "../components/Banner.vue";
    export default {
        name: "Productcenter",
        data() {
            return {
                isSpacial:null,
                activeName: "1",
                index: 1,
                isshow: false,
                tabs: [
                    {
                        label: "工程案例",
                        code: "1"
                    },
                ],
                banners: [
                    { src: require("../assets/banner/engineering/工程案例.jpg")},
                    { src: require("../assets/banner/engineering/工程案例.jpg")},
                    { src: require("../assets/banner/engineering/工程案例.jpg")}
                ],
                numbers: [],
                listType:[
                    {
                        id:1,
                        title:'粮油行业'
                    },{
                        id:2,
                        title:'造纸行业'
                    },{
                        id:3,
                        title:'化工化纤行业'
                    },{
                        id:4,
                        title:'食品饮料行业'
                    },{
                        id:5,
                        title:'电子＆电器行业'
                    },{
                        id:6,
                        title:'医药行业'
                    },{
                        id:7,
                        title:'汽车＆机械制造行业'
                    },
                ],
                pageData: {
                    page: 1,
                    limit: 12,
                    total: 0
                },
                type: 0,
                detailHidden: true,
                form: {
                    id: null,
                    // image: null,
                    // cover: null,
                    title: null,
                    type: 0,
                    images:[],
                    dateTime: null,
                    content: null,
                    upForm: null,
                    bottomForm: null
                },
                imgCurrent:0
            };
        },
        watch: {
            $route: "setActiceName",
        },
        methods: {
            automatecontent1(number){
                // console.log(number);
                // const numRowsWithThreeItems = Math.floor(number / 3); // 计算满足三个一行的行数
                const remainingItems = number % 3; // 计算余数
                if (remainingItems === 0 || remainingItems === 2) {
                    // 余数为0或2，每行三个
                    // for (let i = 0; i < numRowsWithThreeItems; i++) {
                    //   result.push(array.slice(i * 3, (i + 1) * 3));
                    // }
                    return this.isSpecial = 'odd-style'
                } else if (remainingItems === 1) {
                    // 余数为1，每行两个
                    // const result = [];
                    // for (let i = 0; i < numRowsWithThreeItems; i++) {
                    //   result.push(array.slice(i * 3, (i + 1) * 3));
                    // }
                    // 添加最后一行的一个元素
                    // result.push(array.slice(numRowsWithThreeItems * 3));
                    return this.isSpecial = 'even-style'
                }
                // else {
                // // 余数为3，每行三个
                //   return array;
                // }


                // return {
                //   "automate-content1":this.getstyle(),
                // }
            },
            handleClick(tab, event) {
                this.detailHidden = true;
                this.type = tab.name;
                this.listPhoto();
            },
            setActiceName() {
                this.detailHidden=true;
                var url = window.location.href;
                if (url.indexOf("?") > -1) {
                    var active = url.split("?")[1];
                    this.activeName = active;
                    this.type = active;
                    this.tabs=[];
                    this.listType.forEach(item=>{
                        if(active == item.id){
                            this.tabs.push({
                                label:item.title,
                                code:item.id+"",
                            })
                        }
                    });
                }
                this.listPhoto();
            },
            setBanners() {
                //设置轮播图
                this.$store.commit("setBanners", this.banners);
            },
            changeIsShow() {
                this.isshow = !this.isshow;
            },
            handoff(code) {
            },
            listPhoto() {
                this.numbers = [
                    {
                        type: 1,
                        src: require("../assets/engineering/粮油行业.jpg"),
                        text: "哈尔滨市某粮油企业仓储案例",
                        numbersNext: {
                            id: 1,
                            title: "哈尔滨市某粮油企业仓储案例",
                            dateTime: new Date("2023-9-5"),
                            content: "<h3><a id=\"_2\"></a>行业趋势</h3> <hr /> <ul> <li>粮油行业产销量迅速的扩张模式，对仓储物流的要求定将日趋精细化、专业化及规模化</li> <li>仓储配套能力与前端产线衔接更为紧密</li> <li>准确预测季节性需求的重要性</li> <li>劳动短缺问题凸显</li> <li>RFID 在某些领域的使用有所增加</li> </ul> <h3><a id=\"_11\"></a>科讯将如何为您提供帮助</h3> <hr /> <p>&nbsp;&nbsp;&nbsp;&nbsp;科讯提供高效的流程处理能力和精准的货物管控系统，帮助其提升效率，降低成本，改善仓储容量，整合生产仓储流程，同时最大程度提升劳动效率，加强仓储吞吐量的灵活性和订单履行能力，全面实现存储、输送、码垛、分拣等物料流转的信息化、自动化，从而改变传统生产型企业的仓储订单混乱现象。</p> <h3><a id=\"_16\"></a>科讯的解决方案</h3> <hr /> <ul> <li>人工、半自动和全自动拣选系统</li> <li>符合产品包装的周转箱、托盘、托板</li> <li>科讯的WMS/WCS软件解决方案适用于人工、半自动和全自动仓库</li> <li>机器人和自动导引小车</li> <li>无波次拣选，任何进入的订单都可以立即完美地分配到拣选流程中</li> </ul>",
                            images:[
                                require("../assets/engineering/粮油行业.jpg"),
                            ],
                        }
                    },{
                        type: 2,
                        src: require("../assets/engineering/造纸行业.jpg"),
                        text: "牡丹江市造纸厂仓储案例",
                        numbersNext: {
                            id: 2,
                            title: "牡丹江市造纸厂仓储案例",
                            dateTime: new Date("2023-9-5"),
                            content: "<h3><a id=\"_2\"></a>行业趋势</h3> <hr /> <ul> <li>减少人员使用，节约土地空间，高效便利的出入库流程</li> <li>生产制造仓储全流程自动化，智能化</li> <li>所有流程信息化管理，确保物料信息可追溯、可监控、可追责</li> </ul> <h3><a id=\"_9\"></a>科讯将如何为您提供帮助</h3> <hr /> <p>    科讯为造纸及卷装产品生产企业提供个性化的智能仓储解决方案，通过自动化存储设备与计算机管理系统的协作来实现立体仓库的高层合理化，存取自动化，衔接融入企业管理系统、智能管理，帐时同步，加速仓储物流运转速度，节约场地空间，单位面积储存量为平库的3～7倍，大量节约人力资源成本，提高仓库空间利用率。同时它还具有节约用地、节省人力成本（抱车人员约减80%），减轻劳动强度、避免货物损坏或遗失、消除差错、提供仓储自动化水平及管理水平、提高管理和操作人员素质、降低储运损耗、有效地减少流动资金的积压、提供物流效率等诸多优点。</p> <h3><a id=\"_14\"></a>科讯的解决方案</h3> <hr /> <ul> <li>AGV物料搬运系统</li> <li>制造设施的仓库和配送系统能力</li> <li>高密度、紧凑型仓储和缓存子系统</li> <li>实现产品订单化生产</li> <li>优化流程的自动化系统一入库接收、物料仓储、半成品暂存、配套、成品/子组件库存仓储和运输</li> <li>智能仓储软件大限度地提高劳动效率</li> </ul>",
                            images:[
                                require("../assets/engineering/造纸行业.jpg"),
                            ],
                        }
                    },{
                        type: 3,
                        src: require("../assets/engineering/化工化纤行业.jpg"),
                        text: "桐乡市某化纤厂仓储案例",
                        numbersNext: {
                            id: 3,
                            title: "桐乡市某化纤厂仓储案例",
                            dateTime: new Date("2023-9-5"),
                            content: "\n" +
                                "<h3><a id=\"_0\"></a>行业趋势</h3> <hr /> <ul> <li>降低场地使用面积、流程处理时间并减少人工劳动</li> <li>所有流程信息化管理，确保物料信息可追溯、可监控、可追责</li> <li>提高仓库容量、生产效率、流程准确度</li> </ul> <h3><a id=\"_7\"></a>科讯将如何为您提供帮助</h3> <hr /> <p>    科讯为化工/化纤企业提供个性化的智能仓储解决方案，可根据行业特性和实际需求，为客户定制最佳整体解决方案，解决了库存的柔性反应、快速交付及响应，快速解决库存问题，而更重要的是降低了生产成本，使生产性投资性价比更高，最为关键的是仓储用地的利用率大大提高。智能仓储物流实现物流与生产的高效对接，使工厂内部的原材料、半成品、成品及零部件等存储和输送更加智能、高效。目前科讯的一站式的智能仓储解决方案已广泛应用于化工化纤行业，并得到行业充分认可。</p> <h3><a id=\"_12\"></a>科讯的解决方案</h3> <hr /> <ul> <li>AGV物料搬运系统</li> <li>制造设施的仓库和配送系统能力</li> <li>高密度、紧凑型仓储和缓存子系统</li> <li>适应未来增长和运营变化的灵活能力</li> <li>原材料、成品、半成品的移动和仓储</li> <li>优化流程的自动化系统一入库接收、物料仓储、半成品暂存、配套、成品/子组件库存仓储和运输</li> <li>智能仓储软件大限度地提高劳动效率</li> </ul>",
                            images:[
                                require("../assets/engineering/化工化纤行业.jpg"),
                            ],
                        }
                    },{
                        type: 4,
                        src: require("../assets/engineering/食品饮料行业.jpg"),
                        text: "长沙市某食品企业仓储案例",
                        numbersNext: {
                            id: 4,
                            title: "长沙市某食品企业仓储案例",
                            dateTime: new Date("2023-9-5"),
                            content: "<h3><a id=\"_0\"></a>行业趋势</h3> <hr /> <ul> <li>越来越多使用全渠道分销，小规模商店、购物中心、虚拟购、直接送货到家</li> <li>应对季节性的峰值，堆垛机、穿梭车和输送机系统需要具有足够的动力储备</li> <li>行业特殊性要求仓储输送设备具有严格的卫生规定，温度区域，重载货物、多种类载体同时仓储和保证易损的饮料容器不破损的能力</li> <li>门店送货服务，降低人工成本，确保商店有货可供销售</li> <li>RFID 在某些领域的使用有所增加</li> </ul> <h3><a id=\"_9\"></a>科讯将如何为您提供帮助</h3> <hr /> <p>    科讯根据不同食品的特殊要求，提供最高的稳定性、快速进出的最优物料流、针对行业特征量身定制的仓储方案。食品种类多种多样。但食品物流中对于堆垛机和输送机的要求是大体相同的，食品行业使用的仓库不仅能保证干燥，还保证食品新鲜。冷冻区域独立于其他不同的温度区域，并能实现调节不同空气湿度。</p> <h3><a id=\"_14\"></a>科讯的解决方案</h3> <hr /> <ul> <li>无波次拣选，任何进入的订单都可以立即完美地分配到拣选流程中</li> <li>使用食品安全级别润滑剂，机油和材料</li> <li>能够在不同湿度的各个温度区域运行</li> <li>科讯的WMS/WCS软件解决方案适用于人工、半自动和全自动仓库</li> <li>机器人和自动导引小车</li> <li>低温仓储适应各类产品的仓储条件</li> </ul>",
                            images:[
                                require("../assets/engineering/食品饮料行业.jpg"),
                            ],
                        }
                    },{
                        type: 5,
                        src: require("../assets/engineering/电子＆电器行业.jpg"),
                        text: "成都市某电子设备生产企业项目案例",
                        numbersNext: {
                            id: 5,
                            title: "成都市某电子设备生产企业项目案例",
                            dateTime: new Date("2023-9-5"),
                            content: "\n" +
                                "<h3><a id=\"_0\"></a>行业趋势</h3> <hr /> <ul> <li>需要持续平衡生产能力和产能灵活性</li> <li>控制人工成本所需的自动化改进</li> <li>精益即时战略</li> <li>制造运作回流</li> <li>订单的准确性、履行和补货速度对入站物料和线侧补充至关重要</li> <li>软件系统对全球采购实施管理并提供供应链可视性</li> </ul> <h3><a id=\"_10\"></a>科讯将如何为您提供帮助</h3> <hr /> <p>    科讯确保您的生产流程持续运转。利用技术和软件知识来开发适合您的解决方案。无论您从事3C电子产品制造或是小家电生产，我们可以优化您的流程—入库接收、物料仓储、半成品暂存、配套、成品库存仓储和运输。</p> <h3><a id=\"_15\"></a>科讯的解决方案</h3> <hr /> <ul> <li>制造设施的仓库和配送系统能力</li> <li>高密度、紧凑型仓储和缓存子系统</li> <li>适应未来增长和运营变化的灵活能力</li> <li>自动化大限度地提高劳动效率，提供</li> <li>AGV物料搬运系统</li> <li>强大的仓储软件，用于管理工厂内的库存仓储和物料移动，监管仓储状态</li> <li>优化流程的自动化系统—入库接收、物料仓储、半成品暂存、配套、成品/子组件库存仓储和运输</li> </ul>",
                            images:[
                                require("../assets/engineering/电子＆电器行业.jpg"),
                            ],
                        }
                    },{
                        type: 6,
                        src: require("../assets/engineering/医药行业.jpg"),
                        text: "武汉某医药配送中心仓储案例",
                        numbersNext: {
                            id: 6,
                            title: "武汉某医药配送中心仓储案例",
                            dateTime: new Date("2023-9-5"),
                            content: "<h3><a id=\"_0\"></a>行业趋势</h3> <hr /> <ul> <li>信息化系统支持药品的GSP管理，支持对大量数据的查询与统计工作</li> <li>许多产品需要受控访问，有时需要特殊处理，如冷藏</li> <li>大型批发商和零售商之间的联合导致满足需求的压力提升</li> <li>由于法规、产品处理要求和不断变化的客户需求，利润率难以维持</li> </ul> <h3><a id=\"_8\"></a>科讯将如何为您提供帮助</h3> <hr /> <p>    科讯为医药业企业提供包括物料周转、存储、运输、拣选、统计、查询、信息处理等多模块化的智能仓储物流解决方案，通过智能存储、智能输送、智能码垛、智能分拣和机器人应用系统，为客户提供全方位自动化物流解决方案。这些解决方案可以帮助企业最大限度利用仓储空间，减少成本；整合物流资源，优化药品出入库策略、拣选、输送及包装的程序流程，实现企业内部物流从原料到成品的全程自动化；优质高效地保证药品的综合管理、控制和配送，节约人工成本。该系统具有物流设备效率高、运行稳定、作业精细等特点，并且配有高度信息化管理系统。</p> <h3><a id=\"_13\"></a>科讯的解决方案</h3> <hr /> <ul> <li>根据政府对药品管理的规定，对整个供应链内的产品进行跟踪和追溯</li> <li>自动化产业链能够跟上新产品和包装的快速增长</li> <li>通过自动化解决劳动力短缺和高流动率等问题</li> <li>特定仓库环境下AGV物料搬运系统</li> <li>智能仓储软件对产品流转进行控制</li> <li>适应不断变化的法规、产品处理要求和客户需求</li> </ul>",
                            images:[
                                require("../assets/engineering/医药行业.jpg"),
                            ],
                        }
                    },{
                        type: 7,
                        src: require("../assets/engineering/汽车＆机械制造行业.jpg"),
                        text: "长春市某汽车制造业仓储案例",
                        numbersNext: {
                            id: 7,
                            title: "长春市某汽车制造业仓储案例",
                            dateTime: new Date("2023-9-5"),
                            content: "<h3><a id=\"_0\"></a>行业趋势</h3> <hr /> <ul> <li>提高自动化程度，进一步减少人工成本</li> <li>所有原料、成品、半成品物流信息透明化，可监控</li> <li>提高仓库容量、生产效率、流程准确度</li> <li>由于服务水平的提升、更短的交货时间和可能的取货时间缩短，增加了售后服务中的收入</li> </ul> <h3><a id=\"_8\"></a>科讯将如何为您提供帮助</h3> <hr /> <p>    科讯在为汽车＆机械制造企业设计的每个智能仓储物流解决方案的开发过程中均引入了基于该行业的工业工程算法，拥有设计高性能解决方案所需的流程改进工程经验和专业技能，可实现按照客户的产品品种、产品规格、产品质量、出入货数量、发货时间、配送地点等要求，及时高效精准的完成物资从入库到配送的信息化管理，实现库存最优化、生产效率最大化和物流成本最小化目标。每个解决方案的核心是创新的系统设计，以及具有整体统筹性的管理软件，从而能够提供实时控制、可视性和运营的管理方案。</p> <h3><a id=\"_13\"></a>科讯的解决方案</h3> <hr /> <ul> <li>通过降低报废成本和最大限度减少折旧实现了存货管理水平的提高和存货费用的降低</li> <li>产品可用性高，流程可靠安全，设有安全的应急策略</li> <li>通过仓储软件对小批量订单吞吐能力的分类优化实现了更低的库存水平</li> <li>对于时间紧迫的订单，通过全天候可用的最佳实践标准提升了交付服务水平AGV物料搬运系统</li> <li>避免了订单的积压，实时精确的库存管理，零错误拣货和更高的订单可见性</li> <li>通过提升效率实现了更低的使用成本</li> </ul>",
                            images:[
                                require("../assets/engineering/汽车＆机械制造行业.jpg"),
                            ],
                        }
                    },

                ];
                if (this.type != null && this.type != 0) {
                    this.numbers = this.numbers.filter(item => item.type == this.type);
                }
                this.pageData.total = this.numbers.length;
                var indexPage = (this.pageData.page - 1) * this.pageData.limit;
                this.numbers = this.numbers.slice(
                    indexPage,
                    this.pageData.limit + indexPage
                );
            },
            handelPage(val) {
                this.pageData.page = val;
                this.listPhoto();
            },
            //详情页
            showDetails(id) {
                if (id == null) {
                    return;
                }
                var numbers = this.numbers;
                this.detailHidden = false;
                this.form = JSON.parse(
                    JSON.stringify(numbers.filter(item => item.numbersNext.id == id)[0].numbersNext)
                );
                numbers.forEach((item, index) => {
                    if (id == item.numbersNext.id) {
                        if (index == 0) {
                            this.form.upForm = null;
                            this.form.bottomForm = numbers[index + 1];
                        }
                        if (index == this.numbers.length - 1) {
                            this.form.upForm = numbers[index - 1];
                            this.form.bottomForm = null;
                        }
                        if (index != 0 && index != this.numbers.length - 1) {
                            this.form.upForm = numbers[index - 1];
                            this.form.bottomForm = numbers[index + 1];
                        }
                    }
                });
            },
            //设置详情轮播
            imageChange(current,original){
                this.imgCurrent=current;
            },
        },
        mounted() {
            this.setBanners();
            this.setActiceName();
            this.listPhoto();
        },
        components: {
            Banner
        }
    };
</script>

<style scoped>
  /* 自动化仓库样式 */
  .suruji {
    /* display: flex; */
    width: 100%;
    height: 100%;
  }
  .suruji-table {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: red;
  }
  .suruji-table_one {
    width: 20%;
    height: 100%;
    /* background-color: yellow; */
  }
  .suruji-table_two {
    width: 20%;
    height: 100%;
    /* background-color: green; */
  }
  .automate-content {
    width: 100%;
    height: 100%;
    /*background-color: rgb(255, 255, 255);*/
  }
  .automate-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    /* flex-wrap: wrap; */
    /* margin: 0 auto; */
    align-items: flex-end;

  }
  .odd-style {
    width: 33%;
    height: 100%;
    /* margin: 0 auto; */
    text-align: center;
    /* margin-right: 0.3%; */
    /* justify-content: space-around; */
  }
  .even-style{
    width: 50%;
    height: 100%;
    /* margin: 0 auto; */
    text-align: center;
    /* margin-right: 0.3%; */
    /* justify-content: space-around; */
  }
  /* .automate-content1 {
    width: 33%;
    height: 100%;
    text-align: center;
  } */


  .automate-fenyeqi {
    text-align: center;
  }
  .lunboPictures{
    width: 80%;
    height: 80%;
    display: flex;
    /*border: 1px solid rgb(47, 0, 255);*/
  }
  .item{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: cente; */
    /* border: 1px solid rgb(242, 255, 0); */
    /* overflow: hidden; */
  }

  .item:hover .item-img{
    transform: scale(1.2);
  }

  .item:hover .item-word{
    background-color: rgb(64, 158, 255);
    color: rgb(0, 65, 147);
  }
  .item-div{
    width: 100%;
    height: 70%;
    /* padding-top: -100%; */
    aspect-ratio: 16/9;
    max-width: 100%;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* background-color: rgb(17, 197, 167); */
  }

  .item-div > a{
    width: 100%;
    height: 100%;
    display: block;
    display: flex;
    overflow: hidden;
    /* border: 2px solid rgb(189, 72, 170); */

  }
  .item-word {
    width: 100%;
    height: 20%;
    /* border: 1px solid skyblue; */
    /* color: black; */
    font-weight:bold;
    display: inline-block;

  }
  .item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s;
    /* position: relative; */
  }
  .item-word {
    display: block;
    text-align: center;
    background-color: #ffffff;
  }

  @media screen and (max-width: 768px) {
    .div-right {
      padding: 10px;
      display: inline-block;
    }
  }
  @media screen and (min-width: 768px) {
    .div-right {
      width: 40%;
      padding: 10px;
      display: inline-block;
      float: right;
    }
  }
  @media screen and (max-width: 991px) {
    .odd-style,.even-style {
      width: 50%;
      height: 100%;
      /* margin: 0 auto; */
      text-align: center;
      /* margin-right: 0.3%; */
      /* justify-content: space-around; */
    }
    .form > h3{
      font-size: 14px;
    }
    div /deep/ .el-carousel__container{
      height: 88px !important;
    }
  }
  .tabs {
    font-size: 30px !important;
    padding-left: 1%;
    padding-right: 1%;
    margin: 0;
    background-color: #ffffff;
  }
  div /deep/ .el-tabs__item {
    font-size: 16px !important;
  }
  .content {
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .div-left {
    width: 40%;
    padding: 10px;
    display: inline;
  }
  .img-gsjj {
    max-width: 100%;
    height: auto;
  }
  .div-center {
    margin-left: auto;
    margin-right: auto;
    height: auto;
  }
  h3 {
    color: #409eff;
    padding: 20px;
    margin-left: 7%;
  }
  .content-details{
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  @media screen and (max-width: 768px){
    .details-content-left{
      text-align: center;
      display: inline-block;
      float: left;
    }
    .details-content-right{
      padding: 10px;
      padding-right: auto;
      padding-left: auto;
      display: inline-block;
      text-align: left;
      /*float: right;*/
    }
  }
  @media screen and (min-width: 768px){
    .details-content-left{
      width: 45%;
      display: inline-block;
      text-align: center;
      float: left;
    }
    .details-content-right{
      width: 45%;
      padding: 20px;
      display: inline-block;
      text-align: left;
    }
  }
  .page-left{
    float: left;
  }
  .page-right{
    float: right;
  }
  .div-page{
    height: 50px;
    padding-top: 25px;
  }
  .a-page{
    color: black;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
  }
  a:hover {
    color: #409EFF;
  }

</style>
